<script setup lang="ts">
import { hasAuth } from "@/router/utils";
import dayjs from "dayjs";
import { useApproval } from "./utils/hook";

defineOptions({
  name: "TeamApproval"
});

const {
  form,
  loading,
  dataList,
  pagination,
  deviceDetection,
  onSearch,
  resetForm,
  currentData,
  tabType,
  detailType,
  tabList,
  moduleMap,
  checkForm,
  approvalList,
  approvalColumns,
  currentComponent,
  getTitleName,
  tabChange,
  approvalPass,
  approvalReject,
  handleSizeChange,
  handleCurrentChange
} = useApproval();
</script>

<template>
  <div class="approval">
    <div class="header custom-card">
      <!-- el-card -->
      <!-- <div class="mr-5">待审核项</div> -->
      <el-tabs v-model="tabType" class="tabs" @tab-change="tabChange">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :name="item.name"
        >
          <template #label>
            <span>{{ item.label }}</span>
            <span v-if="item.count" class="pl-1 text-orange-500">
              {{ item.count }}</span
            >
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="content">
      <div v-loading="loading" class="left custom-card">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="left-item"
          :class="{
            act: currentData.id == item.id,
            approval: item.examineStatus === 0
          }"
          @click="currentData = item"
        >
          <div class="title">{{ getTitleName(item) }}</div>
          <div class="cell">
            <div class="c-title">提交人</div>
            <div class="c-content">{{ item.createUserName || "--" }}</div>
          </div>
          <template v-if="['kycg', 'jxcg'].includes(tabType)">
            <div v-if="tabType == 'kycg'" class="cell">
              <div class="c-title">团队名称</div>
              <div class="c-content">
                {{ item?.researchTeam?.teamName || "--" }}
              </div>
            </div>
            <div class="cell">
              <div class="c-title">负责人</div>
              <div class="c-content">
                {{ item?.researchTeam?.masterUser.name || "--" }}
              </div>
            </div>
            <div class="cell">
              <div class="c-title">联系方式</div>
              <div class="c-content">
                {{ item?.researchTeam?.masterUser.phone || "--" }}
              </div>
            </div>
          </template>
          <el-divider />
          <!-- examineStatus 	审核状态 0审核中 1已审核 2已驳回 -->
          <div>
            <el-tag v-if="item.examineStatus == 1" type="primary"
              >已通过</el-tag
            >
            <el-tag v-else-if="item.examineStatus == 2" type="danger"
              >已驳回</el-tag
            >
            <div v-else>
              <el-button
                v-if="hasAuth('approval:btn:pass')"
                size="small"
                type="primary"
                plain
                @click="approvalPass(item)"
                >通过</el-button
              >
              <el-button
                v-if="hasAuth('approval:btn:cancel')"
                size="small"
                type="danger"
                plain
                @click="approvalReject(item)"
                >驳回</el-button
              >
            </div>
          </div>
        </div>
        <el-empty
          v-if="dataList.length == 0"
          class="m-auto"
          description="暂无数据~"
        />
      </div>

      <!-- 审核详情 -->
      <div class="right custom-card">
        <template v-if="dataList.length == 0">
          <el-empty class="m-auto" description="暂无数据~" />
        </template>
        <template v-else>
          <div class="flex items-center mb-4">
            <img
              class="mr-2"
              width="30"
              height="30"
              src="@/assets/other/achiev.png"
              alt=""
            />
            <h4 class="mr-2">{{ getTitleName(currentData) }}</h4>
            <div>
              <el-tag
                v-if="currentData.examineStatus === 0"
                type="warning"
                size="small"
                >审核中</el-tag
              >
              <el-tag
                v-else-if="currentData.examineStatus === 1"
                type="primary"
                size="small"
                >已审核</el-tag
              >
              <el-tag v-else type="danger" size="small">已驳回</el-tag>
            </div>
          </div>
          <div class="text-xs text-[#666] flex">
            <div class="w-[120px]">
              提交人: {{ currentData.createUserName || "--" }}
            </div>
            <div>
              提交时间:
              {{ dayjs(currentData.gmtModified).format("YYYY-MM-DD HH:mm") }}
            </div>
          </div>
          <el-divider />
          <!-- <el-tabs v-model="detailType" class="mt-[-16px]">
          <el-tab-pane :name="1" label="审核详情" />
          <el-tab-pane :name="2" label="审核记录" />
        </el-tabs> -->
          <div class="check-detail">
            <!-- 详情动态组件 -->
            <!-- <keep-alive> -->
            <component
              :is="currentComponent"
              v-if="currentData.id"
              :dataId="currentData.id"
              :formInline="{}"
              isApproval
            />
            <!-- </keep-alive> -->
            <!-- 审核记录 -->
            <!-- <div v-show="detailType == 2">
            <pure-table
              row-key="id"
              class="bd-hide"
              align-whole="center"
              :data="approvalList"
              :columns="approvalColumns"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
            />
          </div> -->
          </div>
          <div class="foot-btn">
            <el-button
              v-if="hasAuth('approval:btn:pass')"
              type="primary"
              plain
              @click="approvalPass(currentData)"
              >通过</el-button
            >
            <el-button
              v-if="hasAuth('approval:btn:cancel')"
              type="danger"
              plain
              @click="approvalReject(currentData)"
              >驳回</el-button
            >
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 15px;
}
.el-divider--horizontal {
  margin: 12px 0;
}
// .tabs {
//   padding-bottom: 10px;
// }
// :deep(.tabs .el-tabs__header) {
//   margin-bottom: 0;
// }
.custom-card {
  background-color: #fff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 12px;
}
.approval {
  box-shadow: none !important;
}
.header {
  display: flex;
  align-items: center;
  padding: 2px 15px 0;
  margin-bottom: 12px;
}
.content {
  height: calc(100vh - 182px);
  display: flex;
  .left {
    flex: 3;
    margin-right: 12px;
    overflow: auto;
    .left-item {
      min-height: 100px;
      outline: 1px solid #dcdfe6;
      margin-bottom: 12px;
      border-radius: 5px;
      padding: 10px 12px 15px;
      cursor: pointer;
      box-sizing: border-box;
      &.act {
        outline: 2px solid #5acbff;
      }
      &.approval {
        background: linear-gradient(180deg, #c0ebff 0%, #ffffff 36%), #ffffff;
      }
      .title {
        font-size: 15px;
        color: #0083c0;
        font-weight: bold;
      }
      .cell {
        font-size: 13px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-weight: bold;
        .c-title {
          color: #666;
          min-width: 65px;
        }
        .c-content {
          color: black;
          overflow: hidden;
          word-wrap: break-word;
        }
      }
    }
  }
  .right {
    flex: 7;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .check-detail {
      flex: 1;
      overflow: auto;
      // border: 1px solid red;
    }
    .foot-btn {
      padding-top: 12px;
      border-top: 1px solid #dcdfe6;
    }
  }
}
</style>
